<template>
  <div class="recordBet hideScrollBar" ref="scrollEl">
    <div class="recordBet-bg"></div>
    <!-- 导航 -->
    <NavBar
      isFixed
      :title="pageTitle"
      isTransparent
      :navScorllOffset="60"
      navScorllColor="#fff"
      :scrollEl="scrollEl"
    />
    <div class="contentview">
      <div
        v-if="!pageData.loading && pageData.list.length === 0"
        class="contentview-notdata items-center"
      >
        <img class="contentview-notdata-img" src="/image/notdate-icon.png" />
        <div class="contentview-notdata-desc">{{ t("mvp.other.zwnr") }}</div>
      </div>
      <ClientOnly v-else>
        <!-- 头部信息 -->
        <div class="header" v-if="pageData.list.length > 0">
          <!-- 期数 -->
          <div class="header-top items-center">
            <div class="header-top-value">
              {{ formatWithTimeZone(route.query.beginTime, "Asia/Jakarta") }}
            </div>
            <!-- <div class="header-top-title">{{ $t("lotteryMoney.qstext") }}</div> -->
          </div>
          <!-- 三宫格 -->
          <!-- margin-top: 6px; -->
          <div class="items-center" style="justify-content: space-between">
            <!-- 队伍分红 -->
            <div
              class="header-item"
              style="
                padding-right: 11px;
                margin-right: 11px;
                border-right: 1px solid rgba(255, 255, 255, 0.2);
              "
            >
              <div class="header-item-value">
                ${{ toThousands(decimalToLength(route.query.teamPrizeAmount)) }}
              </div>
              <div class="header-item-title">
                {{ $t("lotteryMoney.dwfhjl") }}
              </div>
            </div>
            <div class="header-item">
              <div class="header-item-value">
                {{ toThousands(decimalToLength(route.query.teamUserCount, 0)) }}
              </div>
              <div class="header-item-title">{{ $t("lotteryMoney.fhrs") }}</div>
            </div>
            <div
              class="header-item"
              style="
                padding-left: 11px;
                margin-left: 11px;
                border-left: 1px solid rgba(255, 255, 255, 0.2);
              "
            >
              <div class="header-item-value">
                {{ toThousands(decimalToLength(route.query.teamDrawCount, 0)) }}
              </div>
              <div class="header-item-title">
                {{ $t("lotteryMoney.teamsBets") }}
              </div>
            </div>
          </div>
        </div>
        <!-- 说明文案 -->
        <div class="dwfhdesc">{{ $t("lotteryMoney.dwfhdesc") }}</div>
        <!-- 队伍名称 -->
        <div v-show="teamName" class="team items-center">
          <div class="team-left"></div>
          <div class="team-center items-center">
            <img class="team-center-icon" src="/image/pledge/title-icon.svg" />
            <div class="team-center-text">
              {{ teamName }}
            </div>
            <img class="team-center-icon" src="/image/pledge/title-icon.svg" />
          </div>
          <div class="team-right"></div>
        </div>
        <!-- 列表 -->
        <div class="list">
          <div class="list-top items-center" v-if="pageData.list.length > 0">
            <div class="list-top-value">{{ $t("lotteryMoney.user") }}</div>
            <div class="list-top-value" style="margin-left: 50px">
              {{ $t("lotteryMoney.xzsNums") }}
            </div>
            <div class="list-top-value">{{ $t("lotteryMoney.xzsfh") }}</div>
          </div>
          <van-list
            v-model:loading="pageData.loading"
            :finished="pageData.finished"
            :finished-text="t('mvp.other.text4')"
            :loading-text="t('mvp.other.text11')"
            @load="onLoadList"
          >
            <div
              v-for="(item, index) in pageData.list"
              :key="`${item.id}${item.sid}`"
              class="list-item items-center"
            >
              <div class="items-center list-item-left">
                <ImgNuxt
                  class="list-item-left-avatar"
                  isHttp
                  :placeholder="file.avatarDefault"
                  :src="item.avatar || file.avatarDefault"
                />
                <!-- 昵称/sid -->
                <div
                  class="items-center"
                  style="align-items: flex-start; flex-direction: column"
                >
                  <div class="list-item-left-title">
                    {{ item.nickname ? item.nickname.substring(0, 11) : "--" }}
                    {{
                      item.nickname && item.nickname.length > 11 ? "..." : ""
                    }}
                  </div>
                  <div class="list-item-left-sid">
                    {{ item.sid ? item.sid.substring(3, 100) : "--" }}
                  </div>
                </div>
              </div>

              <div class="list-item-right items-center">
                <!-- 比例 -->
                <div
                  class="items-center"
                  style="justify-content: center; flex-direction: column"
                >
                  <!-- Bets -->
                  <div class="list-item-right-bfb">
                    {{ item.drawCount || 0 }}
                    <span style="color: #999da7; font-size: 11px"
                      >({{ item.bfb }}%)</span
                    >
                  </div>
                </div>
                <!-- 美元/BDC -->
                <div
                  class="items-center"
                  style="align-items: flex-end; flex-direction: column"
                >
                  <div class="list-item-right-bdc">
                    ${{ toThousands(decimalToLength(item.prizeAmount)) }}
                  </div>
                  <div class="list-item-right-time">
                    ={{ toThousands(decimalToLength(item.prizeAmountValue)) }}
                    BDC
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </ClientOnly>
    </div>
  </div>
</template>
<script setup name="recordBet">
import { getOssFileUrl, toThousands, decimalToLength } from "@/utils";
import { getTeamPrizeRecord } from "../../api/lottery";
import { useDateFormat, useClipboard } from "@vueuse/core";
import Decimal from "decimal.js";

const { t } = useI18n();

// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

const route = useRoute();
console.log("页面参数:", route.query);
const scrollEl = ref();

// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

// 页面属性
const pageData = reactive({
  loading: false,
  finished: false,
  list: [],
  pageNum: 1,
  // total: 0,
});

const pageTitle = computed(() => {
  // if (route.query.beginTime) {
  //   return `${formatWithTimeZone(route.query.beginTime, "Asia/Jakarta")} ${t(
  //     "lotteryMoney.dwfhjl"
  //   )}`;
  // }
  return t("lotteryMoney.dwfhjl");
});

// 上啦加载
const onLoadList = (isRetry) => {
  pageData.pageNum += 1;
  getTeamPrizeRecordRequest((isAdd) => {
    if (!isAdd && !isRetry) {
      setTimeout(() => {
        onLoadList(true);
      }, 500);
    }
  });
};

// 获取列表中最后一个记录
const lastRecord = computed(() => {
  const l = pageData.list.length;
  if (l > 0) {
    return pageData.list[l - 1];
  } else {
    return null;
  }
});

// 获取列表数据
const getTeamPrizeRecordRequest = async (call) => {
  pageData.loading = true;
  const res = await getTeamPrizeRecord({
    lastMinDrawCount: lastRecord.value ? lastRecord.value.drawCount : null,
    lastMinSid: lastRecord.value ? lastRecord.value.sid : null,
    sessionId: route.query.sessionId,
    pageNum: 1,
    pageSize: 2000,
  });
  // console.log("--获取文章列表--", res);
  pageData.loading = false;
  if (res) {
    res.records = res.records.map((e) => {
      e.bfb = decimalToLength(
        new Decimal(e.drawCount || 0)
          .div(route.query.teamDrawCount || 0)
          .mul(100)
      );
      e.prizeAmountValue = decimalToLength(
        new Decimal(e.prizeAmount || 0).mul(1000)
      );
      return e;
    });

    pageData.list = pageData.list.concat(res.records);

    pageData.list = Array.from(
      new Map(pageData.list.map((item) => [item.sid, item])).values()
    );

    if (res.records.length < 20) {
      pageData.finished = true;
    } else {
      pageData.finished = false;
    }

    if (res.records && res.records.length > 0) {
      call && call(true);
    }
  }
  // 失败重试当前这一页数据
  else {
    pageData.finished = true;
    call && call(false);
  }
};
const teamName = ref(null);
onMounted(() => {
  firebase?.logEvent("BDC_H5_recordBet_PUV");
  teamName.value = route.query.teamName;
  pageData.lotteryPoolAmount = route.query.lotteryPoolAmount;
  pageData.sessionUserCount = route.query.sessionUserCount;
  pageData.sessionTotalDrawCount = route.query.sessionTotalDrawCount;
  getTeamPrizeRecordRequest();
});

/**
 * @description: 获取剪贴板内容
 */
const getCopy = (val) => {
  if (!val) return;
  const { copy, isSupported } = useClipboard({
    source: "",
  });
  if (!isSupported.value) {
    showToast(t("mvp.other.bzcjtb"));
  } else {
    copy(val);
    showToast(t("mvp.other.fzcg"));
  }
};

// 期数格式化
const formatWithTimeZone = (date, timeZone) => {
  let time = date;

  if (
    Number(route.query.beginTimeCopy) < 1725552000000 &&
    route.query.beginTimeCopy
  ) {
    time = route.query.beginTimeCopy;
  }
  const yearFormatter = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    timeZone: timeZone,
  });
  const monthFormatter = new Intl.DateTimeFormat("en-US", {
    month: "numeric",
    timeZone: timeZone,
  });
  const dayFormatter = new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    timeZone: timeZone,
  });
  const year = yearFormatter.format(new Date(Number(time)));
  const month = monthFormatter.format(new Date(Number(time)));
  const day = dayFormatter.format(new Date(Number(time)));

  return `${year}.${month}.${day}`;
};
</script>
<style lang="scss" scoped>
.list {
  position: relative;
  z-index: 9;
  margin: 0 15 * 2px;
  background: #fff;
  border-radius: 12 * 2px;
  overflow: hidden;

  &-top {
    padding: 12 * 2px 10 * 2px;
    justify-content: space-between;
    background-color: #f3f9ff;
    &-value {
      font-size: 11 * 2px;
      color: #999da7;
    }
  }
  &-item {
    padding: 8 * 2px 10 * 2px;
    border-bottom: 0.7px solid rgba(115, 119, 128, 0.15);
    &-left {
      min-width: 155 * 2px;
      &-avatar {
        width: 36 * 2px;
        height: 36 * 2px;
        border-radius: 100px;
        overflow: hidden;
        margin-right: 4 * 2px;
      }
      &-title {
        font-size: 13 * 2px;
        color: #141924;
        font-weight: 510;
        margin-bottom: 2 * 2px;
      }
      &-sid {
        font-size: 12 * 2px;
        color: #999da7;
      }
    }

    &-right {
      flex: 1;
      justify-content: space-between;

      &-bfb {
        font-size: 13 * 2px;
        color: #141924;
        font-weight: 510;
      }
      &-bdc {
        font-size: 13 * 2px;
        color: #141924;
        font-weight: 510;
        margin-bottom: 2 * 2px;
      }

      &-time {
        font-size: 12 * 2px;
        color: #999da7;
      }
    }
  }
}
.header {
  position: relative;
  z-index: 9;
  margin: 30 * 2px 15 * 2px 10 * 2px 15 * 2px;
  padding: 16 * 2px 10 * 2px;
  border-radius: 12 * 2px;
  background: linear-gradient(90deg, #007bff 0.34%, #00b2ff 100%);
  &-top {
    // display: -webkit-inline-box;
    position: absolute;
    top: -11 * 2px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2 * 2px 15 * 2px;
    border-radius: 100px;
    border: 3px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    justify-content: space-between;
    max-width: 95%;
    &-title {
      text-wrap: nowrap !important;
      white-space: nowrap;
      font-size: 13 * 2px;
      color: #002853;
      margin-left: 4 * 2px;
    }
    &-value {
      font-size: 15 * 2px;
      color: #007bff;
      font-weight: 590;
    }
  }
  &-item {
    width: 33.33%;
    min-height: 52 * 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    &-value {
      text-align: center;
      font-size: 14 * 2px;
      color: #fff;
      font-weight: 500;
      margin-bottom: 4 * 2px;
    }
    &-title {
      text-align: center;
      color: rgba(255, 255, 255, 0.7);
      font-size: 11 * 2px;
    }
  }
}

.dwfhdesc {
  margin: 0 15 * 2px 10 * 2px 15 * 2px;
  padding: 6 * 2px 10 * 2px;
  border-radius: 12 * 2px;
  font-size: 11 * 2px;
  border: 1px solid rgba(115, 119, 128, 0.15);
  background: linear-gradient(90deg, #cce5ff 0%, #ccf6ff 100%);
}

.recordBet {
  position: relative;
  height: 100vh;
  background-color: #f0f3fa;
  overflow-y: scroll;
  overflow-x: hidden;
  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 300 * 2px;
    background: linear-gradient(
      180deg,
      #96c9ff 0%,
      rgba(236, 245, 255, 0) 100%
    );
  }
  .contentview {
    padding-bottom: var(--safe-area-inset-bottom);
    &-notdata {
      justify-content: center;
      flex-direction: column;
      position: relative;
      top: 120 * 2px;
      &-img {
        width: 200 * 2px;
        height: 200 * 2px;
        margin-bottom: 5px;
      }
      &-desc {
        color: #999da7;
        font-size: 13 * 2px;
      }
    }
  }
}
.team {
  margin: 10 * 2px 0;
  justify-content: space-between;

  &-left {
    width: 112 * 2px;
    height: 0.7px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #0189ff 100%);
  }
  &-right {
    width: 112 * 2px;
    height: 0.7px;
    background: linear-gradient(90deg, #0189ff 0%, rgba(255, 255, 255, 0) 100%);
  }
  &-center {
    &-text {
      font-size: 15 * 2px;
      color: #002853;
      font-weight: 590;
    }
    &-icon {
      margin: 0 12 * 2px;
      width: 9 * 2px;
      height: 9 * 2px;
    }
  }
}
</style>
